@charset "utf-8";

// Switch组件样式


.cx-switch {
    box-sizing: content-box; // 避免项目中设置了 border-box
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    font-size: 56px;
    input[type='checkbox'] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0 none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }
    .checkbox {
        height: 1em;
        width: 1.6em;
        border-radius: 1em;
        z-index: 0;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
        cursor: pointer;
        position: relative;
        transition: all 300ms;
        border: 3px solid #e5e5e5;
        background-color: red;
        // @include setThemes("background");
        // @include setThemes("border-color","color");
        &::before {
            content: ' ';
            position: absolute;
            // height: 1em;
            width: 1.6em;
            border-radius: 1em;
            background: #fff;
            z-index: 1;
            transition: all 200ms;
            -webkit-transform: scale(1);
            -ms-transform: scale(1);
            transform: scale(1);
        }
        &::after {
            content: ' ';
            height: 1em;
            width: 1em;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            top: 50%;
            z-index: 2;
            -webkit-transform: translate(0, -50%);
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            transition: all 200ms;
            box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1),
                0 3px 4px 0 rgba(0, 0, 0, 0.3);
        }
    }
    input[type='checkbox']:checked + .checkbox::before {
        transform: scale(0);
    }
    input[type='checkbox']:checked + .checkbox::after {
        -webkit-transform: translate(0.6em, -50%);
        -ms-transform: translate(0.6em, -50%);
        transform: translateX(0.6em, -50%);
    }
    input[type='checkbox']:disabled + .checkbox {
        opacity: .4;
    }

    &-md {
        font-size: 56px;
    }

    &-brown {
        input[type='checkbox']:checked + .checkbox {
            background-color: brown;
            border-color: brown;
        }
    }
    &-green {
        input[type='checkbox']:checked + .checkbox {
            background-color: green;
            border-color: green;
        }
    }
    &-pink {
        input[type='checkbox']:checked + .checkbox {
            background-color: pink;
            border-color: pink;
        }
    }
    &-white {
        input[type='checkbox']:checked + .checkbox {
            background-color: white;
            border-color: white;
        }
    }
    &-custom-cloud {
        input[type='checkbox']:checked + .checkbox {
            background-color: custom-cloud;
            border-color: custom-cloud;
        }
    }
    &-custom-fuchsin {
        input[type='checkbox']:checked + .checkbox {
            background-color: custom-fuchsin;
            border-color: custom-fuchsin;
        }
    }
    &-custom-tongde {
        input[type='checkbox']:checked + .checkbox {
            background-color: custom-tongde;
            border-color: custom-tongde;
        }
    }
}
